import { AfterViewInit, Component, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';

import { FormArray } from '@angular/forms';
import { FormlyFormOptions } from '@ngx-formly/core';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';


@Component({
  selector: 'apes-box',
  template: `
    <apes-groups [height]="_height">
      <ng-container *ngIf="_data && _data.renderData">
        <apes-group *ngFor="let render of _data.renderData; let i = index" [col]="render.col ? render.col : 24">

          <!-- panel -->
          <ng-container *ngIf="render.type==='panel'">
            <apes-panel [boxHeight]="true" [title]="render.title" [bodyStyle]="render.bodyStyle"
                        [height]="render['height'] > 0 ? _height : null">
              <!-- 输入框 -->
              <ng-container *ngIf="render.genre==='form'">
                <div apes-row>
                  <formly-form [model]="model" [fields]="render.fields" [options]="options" [form]="form">
                  </formly-form>
                </div>
              </ng-container>
            </apes-panel>
          </ng-container>

          <!-- 查询页 -->
          <ng-container *ngIf="render.type==='flexible'">
            <apes-panel [boxHeight]="true" [title]="render.title" [bodyStyle]="render.bodyStyle"
                        [height]="render['height'] > 0 ? _height : null">
              <!-- 输入框 -->
              <ng-container *ngIf="render.genre==='form'">
                <div apes-row>
                  <formly-form [model]="model" [fields]="showFields(render)" [options]="options" [form]="form">
                  </formly-form>
                </div>
                <div apes-row>
                  <div class="apes-search-showMore">
                    <div *ngIf="_showData" (click)="showMore()" class="apes-query-showMore-btn">
                      <i apes-icon [apesType]="'double-right'" [apesRotate]="90"></i>
                    </div>
                    <div *ngIf="!_showData" (click)="showMore()" class="apes-query-showMore-btn">
                      <i apes-icon [apesType]="'double-left'" [apesRotate]="90"></i>
                    </div>
                  </div>
                </div>
              </ng-container>
            </apes-panel>
          </ng-container>

          <!-- 折叠页 -->
          <ng-container *ngIf="render.type==='collapse'">
            <apes-collapse [apesBordered]="false">
              <apes-collapse-panel [apesHeader]="render.title" [apesActive]="render.active">
                <div apes-row>
                  <formly-form [model]="model" [fields]="render.fields" [options]="options" [form]="form">
                  </formly-form>
                </div>
              </apes-collapse-panel>
            </apes-collapse>
          </ng-container>

          <!-- 步骤页 -->
          <ng-container *ngIf="render.type==='steps'">
            <apes-panel *ngIf='currentPanel == render.currentPanel'
                        [boxHeight]="true" [title]="render.title"
                        [bodyStyle]="render.bodyStyle"
                        [height]="render['height'] > 0 ? _height : null">
              <!-- 输入框 -->
              <ng-container *ngIf="render.genre==='form'">
                <div apes-row>
                  <formly-form [model]="model" [fields]="render.fields" [options]="options" [form]="form">
                  </formly-form>
                </div>
              </ng-container>
            </apes-panel>
          </ng-container>

          <!-- 标签页-->
          <ng-container *ngIf="render.type==='tabs' && showPanel(render)">
            <!-- apes-tabset 添加overflow: inherit 影响到下拉浮动层 -->
            <apes-card style="margin: 0 4px;border-radius: 4px;" [apesBordered]="false" [apesTitle]="render.title"
                       class="boxHeight">
              <apes-tabset [apesAnimated]="false" [apesType]="'card'"
                           [ngStyle]="{'overflow':'inherit','padding':'16px 0'}"
                           [apesShowPagination]="true" (apesSelectChange)="onSelectChange($event,options,render)">
                <apes-tab *ngFor="let tab of render.tabs; let j = index" [apesTitle]="tabTitle">
                  <ng-template #tabTitle>
                    <span>{{tab.title}}</span>
                    <span *ngIf="tab.stepGuide" [id]="tab.stepGuide"></span>
                  </ng-template>
                  <!-- 输入框 -->
                  <ng-container *ngIf="tab.genre==='form'">
                    <apes-panel>
                      <div apes-row>
                        <formly-form [model]="model" [fields]="tab.fields" [options]="options" [form]="form">
                        </formly-form>
                      </div>
                    </apes-panel>
                  </ng-container>
                  <!-- 表格 -->
                  <ng-container *ngIf="tab.genre==='grid'">
                    <div apes-row>
                      <formly-form [model]="model" [fields]="tab.fields" [options]="options" [form]="form">
                      </formly-form>
                    </div>
                  </ng-container>
                  <ng-container *ngIf="tab.genre==='split'">
                    <apes-split direction="horizontal">
                      <ng-template ngFor let-row [ngForOf]="tab.fields[0].renderData" let-irow="index">
                        <apes-split-area [size]="row.size" minSize="40">
                          <div apes-row>
                            <formly-form [model]="model" [fields]="row.fields" [options]="options" [form]="form">
                            </formly-form>
                          </div>
                        </apes-split-area>
                      </ng-template>
                    </apes-split>
                  </ng-container>
                  <!-- 循环嵌套（样例定义公司） -->
                  <ng-container *ngIf="tab.genre==='group'">
                    <apes-box [data]="tab.data" [model]="model" [form]="form" [options]="options"></apes-box>
                  </ng-container>
                  <!-- 合计、时间轴 -->
                  <ng-container *ngIf="tab.subtotal">
                    <apes-subtotal>
                      <subtotal-right class="subtotalRight">
                        <div apes-row>
                          <formly-form [model]="model" [fields]="tab.subtotal" [options]="options" [form]="form">
                          </formly-form>
                        </div>
                      </subtotal-right>
                    </apes-subtotal>
                  </ng-container>
                </apes-tab>
              </apes-tabset>
            </apes-card>
          </ng-container>

          <!-- （暂时未用） -->
          <ng-container *ngIf="render.type==='div' && render.genre==='form' ">
            <formly-form [model]="model" [fields]="render.fields" [options]="options" [form]="form">
            </formly-form>
            <apes-subtotal *ngIf="render.subtotal">
              <subtotal-right class="subtotalRight">
                <formly-form [model]="model" [fields]="render.subtotal" [options]="options" [form]="form">
                </formly-form>
              </subtotal-right>
            </apes-subtotal>
          </ng-container>

        </apes-group>
      </ng-container>
    </apes-groups>
  `,
  host: {},
  styles: [`
    .apes-search-showMore {
      bottom: 3px;
      left: 0;
      right: 0;
    }
  `],
})

export class ApesBoxComponent implements OnDestroy, OnInit, AfterViewInit {

  _data: any;

  public _height: any;

  public _title: string;

  public _showData: boolean = true;
  showRow = 6;

  currentPanel = 0;

  @Input() model = {};

  @Input()
  set data(value: any) {
    // this._height = value && value['height'] ? value['height'] : 0;
    this._data = value;

  }

  @Input() form: FormArray;

  @Input() options: FormlyFormOptions = {};

  @Input() set height(value) {
    // console.log(this._data)
    for (let item of this._data['renderData']) {
      this._height = item['height'] ? value - 32 : 'auto';
    }


  }

  get height() {
    return this._height;
  }

  constructor(
    private expressionService: ExpressionService,
    private subject: SubjectService,
  ) {
  }

  ngOnInit(): void {

  }

  ngAfterViewInit() {
    this.subject.subscribe(this.options.formState, this.subject.event_form_steps, data => {
      this.currentPanel = data;
      this.options.formState.ctxSteps = data;
    });
  }

  ngOnDestroy(): void {

  }

  showMore() {
    this._showData = !this._showData;
  }

  showFields(render) {
    let fields = render.fields;
    let show;
    let showRow = render.hasOwnProperty('showRow') ? render['showRow'] : this.showRow;
    if (!this._showData) {
      show = fields;
    } else {
      let data = [];
      for (let i = 0; i < showRow; i++) {
        if (fields[i]) {
          data.push(fields[i]);
        }
      }
      show = data;
    }
    return show;
  }

  showPanel(render) {
    if (!render.hasOwnProperty('currentPanel')) {
      return true;
    } else {
      return this.currentPanel ==  render.currentPanel;
    }
  }

  onSelectChange(params, options, render) {
    if (!render.hasOwnProperty('callback')) return;
    this.expressionService.evaluate(render.callback, {
      context: this.options.formState,
      form: this.options.formState.form,
      model: this.options.formState.model,
      source: params.index,
    }, true);
  }
}
